<template >
  <div style="padding:30px;">
    <el-alert
      title="余票查询"
      type="info"
      :closable="false"
      show-icon
      description="输入出发地及目的地即可查询"
      effect="dark"/>
    <div class="app-container">
    <el-input v-model="listQuery.start_station" placeholder="起始站" style="width: 200px;" class="filter-item" />
    <el-input v-model="listQuery.end_station" placeholder="终点站" style="width: 200px;" class="filter-item" />
    <el-date-picker
    v-model="listQuery.arrive_day"
    value-format="yyyyMMdd"
    align="right"
    type="date"
    placeholder="选择日期"
    :picker-options="pickerOptions">
  </el-date-picker>

    <el-button  class="filter-item" type="primary" icon="el-icon-search" @click="handleQueryTrain">
        搜索
    </el-button>
    <el-table
      v-loading="listLoading"
      :data="list2"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="编号" >
        <template slot-scope="scope">
          {{ scope.row.train_no}}
        </template>
      </el-table-column>
      <el-table-column label="车次"  align="center">
        <template slot-scope="scope">
          {{ scope.row.train_number }}
        </template>
      </el-table-column>

      <el-table-column label="起始站"  align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.start_station }}</span>
        </template>
      </el-table-column>

      <el-table-column label="终点站"  align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.end_station }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="发车时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.start_time }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="到站时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.end_time }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="发车日期" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.arrive_day }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleQuerySeat(row)" >
            余票查询
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="danger">
            购买
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total"  :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getplist" />

      <el-dialog title="余票信息" :visible.sync="dialogFormVisible">
        <el-table
  :data="seatinfo"
  style="width: 100%"
  border
  :row-class-name="tableRowClassName">
  <el-table-column
    prop="carriage_no"
    label="车厢号"
   >
  </el-table-column>
  <el-table-column
    prop="seat_type"
    label="类型"
    >
  </el-table-column>
  <el-table-column
    prop="seat_count"
    label="剩余数量">
  </el-table-column>
    <el-table-column
    prop="seat_cost"
    label="票价">
    <template slot-scope="{row,$index}">
    {{ seatCost(row,$index) }}
  </template>
  </el-table-column>
  
  
  
</el-table>
      <!-- 页脚 -->
      <div slot="footer" class="dialog-footer">
        <!-- 取消 -->
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <!-- 确定 -->
      </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import {queryTrain,querySeat } from '@/api/train'
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
import moment from "moment"
export default {
  
  components: { Pagination },
  data() {
    return {
      dialogFormVisible: false,//对话框是否可见，初始不可见
      temp: {
        train_no:'',
        train_number:'',
        train_carriage:0,
        arrive_day:'',
        start_station:'',
        start_time:'',
        end_station:'',
        end_station:''
      },
      list: null,
      list2:null,
      seatinfo:null,
      last:null,//历时
      baseCost:null,//基本车费
      listLoading: false,
      total:0,
      listQuery: {
        arrive_day:'',
        end_station:'广',
        start_station:'北',
        page: 1,
        limit: 5,
        train_number:undefined
      },
      //日期限制
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }]
        },
    }
  },
  created(){this.handleQueryTrain()},
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
//控制表格颜色
tableRowClassName({row, rowIndex}) {
  if (rowIndex === 0 ||rowIndex === 1) {
    return 'warning-row';
  } else if (rowIndex === 2||rowIndex === 3) {
    return '';
  }
  else{
    return 'success-row'
  }
},
//分页相关
getplist(){
  this.listLoading=true; 
  this.list2=this.list.slice((this.listQuery.page-1)*this.listQuery.limit,(this.listQuery.page)*this.listQuery.limit)
  this.listLoading=false;
},
//查询
handleQueryTrain(){
  if(this.listQuery.start_station==''){
    this.$notify({
      title: '警告',
      message: '起始站不能为空！',
      type: 'warning'
    });
  }
  else if(this.listQuery.end_station==''){
    this.$notify({
      title: '警告',
      message: '目的地不能为空！',
      type: 'warning'
    });
  }
  else{
    this.listLoading=true
    queryTrain({arrive_day:this.listQuery.arrive_day,start_station:this.listQuery.start_station,end_station:this.listQuery.end_station})
    .then(response =>{
      this.list2 = response.data.data
      this.listLoading = false
      this.$notify({
        title: '成功',
        message: '查找成功',
        type: 'success',
        duration: 2000
      })
    })
  }
  
},
//余票查询
handleQuerySeat(row){
  this.listLoading=true
    querySeat({train_no:row.train_no,arrive_day:row.arrive_day})
    .then(response =>{
    this.seatinfo=response.data.data
    this.last = moment('2021-08-17 '+row.end_time).diff(moment('2021-08-17 '+row.start_time),'minutes');
    this.baseCost = this.last*0.833
    this.listLoading=false
    this.dialogFormVisible=true
    })
},
seatCost(row,rowIndex){
  if(rowIndex == 0||rowIndex ==1){
    return "￥"+parseFloat(this.baseCost*3).toFixed(0)+".00"
  }
  else if (rowIndex == 2||rowIndex ==3){
    return "￥"+parseFloat(this.baseCost*1.5).toFixed(0)+".00"
  }
  else{
    return "￥"+parseFloat(this.baseCost).toFixed(0)+".00"
  }
},
  }
}
</script>
<style >
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

</style>
